<template>
  <!-- 核收历史页 -->
  <div
    class="receiveHistoryPage"
    v-infinite-scroll="loadMore"
    :infinite-scroll-disabled="scrollDisFlag"
    style="height: 450px; overflow: auto"
  >
    <template v-if="receiveState.listData.length">
      <div
        class="contentListBox"
        v-for="(n, i) in receiveState.listData"
        :key="i"
      >
        <div class="titleBox m-b20">
          <span class="titleItemBox">所属合同：{{ n.contractName }}</span>
          <span class="">所属项目：{{ n.projectName }}</span>
          <el-divider class="dividerStyle" direction="vertical" />
          <span class="titleItemBox"
            >押金：{{ n.deposit }} {{ n.depositUnit }}</span
          >
          <span class=""
            >流水号：{{ n.depositSerialNo ? n.depositSerialNo : "--" }}</span
          >
          <el-divider class="dividerStyle" direction="vertical" />
          <span class="titleItemBox">发生退款：{{ n.refundMoney }}</span>
          <span class=""
            >流水号：{{ n.refundSerialNo ? n.refundSerialNo : "--" }}</span
          >
          <el-divider class="dividerStyle" direction="vertical" />
          <span class="titleItemBox"
            >账户余额：{{ n.accountBalance }} {{ n.accountBalanceUnit }}</span
          >
        </div>
        <el-table
          ref="multipleTable"
          class="receiveTabel"
          :data="n.list"
          :header-row-style="{ background: '#F5F5F5' }"
          :header-cell-style="{
            background: 'none',
            padding: '12px 0',
          }"
          tooltip-effect="dark"
          border
          style="width: 100%; margin-bottom: 23px"
        >
          <el-table-column prop="numberOfPeriods" label="期数" align="center">
          </el-table-column>
          <el-table-column prop="payDuringTime" label="期间" align="center">
          </el-table-column>
          <el-table-column
            prop="leaseTotalArea"
            label="租赁面积"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="increaseRatio"
            label="递增"
            align="center"
          ></el-table-column>
          <el-table-column prop="payRealTime" label="缴租时间" align="center">
          </el-table-column>
          <el-table-column prop="receivedRent" label="缴租金额" align="center">
          </el-table-column>
          <el-table-column prop="payType" label="缴租方式" align="center">
          </el-table-column>
          <el-table-column prop="userName" label="经办人" align="center">
          </el-table-column>
          <el-table-column
            prop="collectionTime"
            label="核收时间"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="payPlanId" label="流水号" align="center">
          </el-table-column>
        </el-table>
      </div>
    </template>
    <template v-else>
      <div class="nodataBox">暂无数据</div>
    </template>
  </div>
</template>

<script setup>
import { ref, reactive, shallowRef, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElDivider } from "element-plus";
import { numToFixed } from "@/common/utils/GlobalUtils";
import { assetFilesApi } from "@/api/assets";
const router = useRouter();
// 从路由path中获取的
const getAssetsId = router.currentRoute.value.params.assetsId;

const receiveState = reactive({
  pageNumber: 1,
  listData: [
    // {
    //   contractName: "--",
    //   projectName: "--",
    //   deposit: "--",
    //   depositSerialNo: "--",
    //   refundMoney: "--",
    //   refundSerialNo: "--",
    //   contractId: "--",
    //   leaseTotalArea: "--",
    //   list: [
    //     {
    //       numberOfPeriods: "--",
    //       payDuringTime: "--",
    //       leaseTotalArea: "--",
    //       increaseRatio: "--",
    //       payRealTime: "--",
    //       receivedRent: "--",
    //       payType: "--",
    //       userName: "--",
    //       collectionTime: "--",
    //       payStatus: "--",
    //       increaseRatio: "--",
    //       payPlanId: "--",
    //     },
    //   ],
    // },
  ],
});

// 滚动后的加载方法
const loadMore = () => {
  receiveState.pageNumber += 1;
  initData();
};
//是否禁用无限滚动加载
const scrollDisFlag = ref(false);
// 初始化方法
const initData = () => {
  scrollDisFlag.value = true;
  let params = {
    pageNum: receiveState.pageNumber,
    pageSize: 5,
    param: getAssetsId,
  };
  assetFilesApi.getCollectionHistory(params).then((res) => {
    const { code, data, msg } = res;
    if (code == 200) {
      if (data.content.length) {
        let getReceiveArr = data.content.map((n, i) => {
          if (n.list.length > 0) {
            // table数据
            n.list.map((m, j) => {
              m.payDuringTime = m.payStartTime + "-" + m.payEndTime;
              m.payStatus =
                m.payStatus == 1
                  ? "已收"
                  : m.payStatus == 2
                  ? "政策面授"
                  : m.payStatus == -1
                  ? "已支付"
                  : m.payStatus == -2
                  ? "未支付"
                  : "";
              return m;
            });
          }
          // 押金显示处理
          if (n.deposit && n.deposit !== null && n.deposit !== "") {
            n.deposit = numToFixed(n.deposit, 2).split("&")[0];
            n.depositUnit = numToFixed(n.deposit, 2).split("&")[1]
              ? numToFixed(n.deposit, 2).split("&")[1] + "元"
              : "元";
          } else {
            n.deposit = "--";
            n.depositUnit = "元";
          }
          // 账户余额显示处理
          if (
            n.accountBalance &&
            n.accountBalance !== null &&
            n.accountBalance !== ""
          ) {
            n.accountBalance = numToFixed(n.accountBalance, 2).split("&")[0];
            n.accountBalanceUnit = numToFixed(n.accountBalance, 2).split("&")[1]
              ? numToFixed(n.accountBalance, 2).split("&")[1] + "元"
              : "元";
          } else {
            n.accountBalance = "--";
            n.accountBalanceUnit = "元";
          }
          return n;
        });
        receiveState.listData = receiveState.listData.concat(getReceiveArr);
        scrollDisFlag.value = false;
      }
    }
  });
};

onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped>
.receiveHistoryPage {
  .contentListBox {
    .titleBox {
      font-size: 16px;
      font-weight: bold;
      color: #1a1a1a;
      .titleItemBox {
        margin-right: 36px;
      }
      .dividerStyle {
        margin: 0 34px;
      }
    }
  }
  .nodataBox {
    width: 100%;
    height: 200px;
    text-align: center;
    line-height: 200px;
    font-size: 18px;
    color: #ccc;
  }
}
</style>
<style lang="scss" scoped>
.receiveHistoryPage {
  :deep(.receiveTabel) {
    .el-table__header-wrapper {
      .el-table__header {
        .el-table__cell {
          .cell {
            color: #333;
            font-weight: 600;
          }
        }
      }
    }
  }
}
</style>
